<template>

  <div class="login_box">
  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="用户名" prop="userName">
      <el-input type="text" v-model="ruleForm.userName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="设置新密码" prop="pass">
      <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="ruleForm.age"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-input v-model.number="ruleForm.sex"></el-input>
    </el-form-item>
    <el-form-item label="土地编号" prop="soilId">
      <el-input v-model.number="ruleForm.soilId"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "userAdd",
    data() {
      var checkUserName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }
      }
      var checkSex = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('性别不能为空'));
        }
      }
      var checkSoilId = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('土地编号不能为空'));
        }
      }
        var checkAge = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('年龄不能为空'));
          }
          setTimeout(() => {
            if (!Number.isInteger(value)) {
              callback(new Error('请输入数字值'));
            } else {
              if (value < 18) {
                callback(new Error('必须年满18岁'));
              } else {
                callback();
              }
            }
          }, 1000);
        };
        var validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.ruleForm.checkPass !== '') {
              this.$refs.ruleForm.validateField('checkPass');
            }
            callback();
          }
        };
        var validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.ruleForm.pass) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        return {
          ruleForm: {
            userName: '',
            pass: '',
            checkPass: '',
            age: '',
            sex: '',
            soilId: ''
          },
          rules: {
            pass: [
              {validator: validatePass, trigger: 'blur'}
            ],
            checkPass: [
              {validator: validatePass2, trigger: 'blur'}
            ],
            age: [
              {validator: checkAge, trigger: 'blur'}
            ],
            userName: [
              {validator: checkUserName, trigger: 'blur'}
            ],
            sex: [
              {validator: checkSex, trigger: 'blur'}
            ],
            soilId: [
              {validator: checkSoilId, trigger: 'blur'}
            ]
          }
        };
      },

    methods: {
      submitForm() {
        const params={
          userName: this.ruleForm.userName,
          passWord: this.ruleForm.pass,
          age: this.ruleForm.age,
          sex: this.ruleForm.sex,
          soilId: this.ruleForm.soilId
        }
        axios.post(`/api/user/saveUser`,params)
          .then(({data}) => {
            if (data.message == '保存成功')
            {
              this.$message({
                message: data.message,
                type: "success"
              })
            }
            else {
              this.$message({
                message: data.message,
                type: "error"
              })
            }
          })
          .catch((e) => {
            console.log(e)
          })

    },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
}
</script>

<style scoped>
.login_box{
  width: 600px;
  height: 100%;
  border-radius: 3px;
  position: absolute;
  /*background: bisque;*/
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}

</style>
